<template>
    <Header></Header>

    <main class="container max-w-screen-xl mx-auto px-4 md:px-6 py-4">
        <div class="flex flex-col items-center justify-center">
            <div class="video-container">
                <video id="random-video" controls></video>
            </div>
            <el-button type="primary" class="btn-video" :onClick="getRandomVideo">下一个</el-button>
        </div>
    </main>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import { onMounted } from 'vue'

const ids = ["jk","YuMeng","NvDa","NvGao","ReWu","QingCun","YuZu","SheJie","ChuanDa","GaoZhiLiangXiaoJieJie","HanFu","HeiSi","BianZhuang","LuoLi","TianMei","BaiSi"];

const getRandomVideo = () => {
    const videoEle = document.getElementById('random-video')
    if (videoEle) {
        videoEle.src = "http://api.mmp.cc/api/ksvideo?type=mp4&id=" + ids[Math.floor(Math.random() * ids.length)];
        videoEle.load(); // 确保视频元素重新加载新的源
        videoEle.play();
        videoEle.loop = true;
        //videoEle.addEventListener('ended', getRandomVideo)
    }
}

onMounted(() => {
    getRandomVideo()
})

</script>

<style scoped>
.btn-video {
    margin-top: 20px;
}

.video-container {
    width: 100%;
    height: 640px; /* 固定高度 */
    max-width: 360px; /* 最大宽度 */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#random-video {
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .video-container {
        height: 80vh; /* 在小屏幕上调整高度 */
    }
    
    #random-video {
        width: 100%;
        height: 80vh;
    }
}
</style>